<!--
 * @Date: 2022-05-09 16:13:39
 * @Author: 陶子
 * @LastEditTime: 2023-06-06 19:22:08
 * @FilePath: \jk_one-stop_pc\src\views\baseManagement\maintain\repairDetail.vue
 * @pageName: 这是--(报修维修详情)--页面
-->
<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['设备管理','设备维修',headerTitle]" currentMenu="报修维修详情">
    </crumbs>
    <div class="uni-card" style="padding-bottom:0">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="wrapLeft">
          <div class="detail-item">
            <p class="subtitle">报修编号</p>
            <p class="secondary-text">{{ repairDetailInfo.repairCode || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">报修时间</p>
            <p class="secondary-text" v-if="repairDetailInfo.createTime">{{repairDetailInfo.createTime }}</p>
            <p class="secondary-text" v-else>-</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">报修人</p>
            <p class="secondary-text">{{ repairDetailInfo.createByText || '-' }}</p>
          </div>
        </div>
        <div class="wrapRight">
          <flow-status ids="MESS_DEVICE_REPAIR" :formStatusText="repairDetailInfo.statusText" :flowStatus="repairDetailInfo.flowStatus" title="维修状态">
          </flow-status>
          <!-- <div class="detail-item">
            <p class="subtitle">维修状态</p>
            <p class="secondary-text" :style='{color:returnColor(repairDetailInfo.status),fontSize:"16px"}'>{{ repairDetailInfo.statusText || '--' }}</p>
          </div> -->
        </div>
      </div>
      <div class="tabBox">
        <a-tabs v-model="cuttentTab">
          <a-tab-pane :tab="tabItem.title" v-for="tabItem in tabList" :key='tabItem.key'></a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <div class="cards-box">
      <div v-if="cuttentTab==1">
        <a-card title="设备信息" :bordered="false" style="margin-top:12px">
          <div class="item-wrap">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">故障设备</p>
                <p class="secondary-text">{{ repairDetailInfo.deviceCode || '-' }} | {{ repairDetailInfo.deviceName || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">设备类别</p>
                <p class="secondary-text">{{ repairDetailInfo.deviceCategoryText || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text"></p>
              </div>
            </div>
            <div class="wrapRight">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
              </div>
            </div>
          </div>
        </a-card>
        <a-card title="故障信息" :bordered="false" style="margin:12px 0">
          <div class="item-wrap">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">紧急程度</p>
                <p class="secondary-text">{{ repairDetailInfo.urgencyText || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">发生时间</p>
                <p class="secondary-text">{{ repairDetailInfo.happenTime || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text"></p>
              </div>
            </div>
            <div class="wrapRight">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
              </div>
            </div>
          </div>
          <div class="item-wrap" style="margin-top:40px">
            <div class="detail-item">
              <p class="subtitle">故障描述</p>
              <p class="secondary-text">{{ repairDetailInfo.faultDescription || '-' }}</p>
            </div>
          </div>
          <div class="item-wrap" style="margin-top:40px">
            <div style="width:100%">
              <p class="subtitle">附件</p>
              <file-detail :ids="repairDetailInfo.attachment" v-if="repairDetailInfo.attachment"></file-detail>
              <p class="secondary-text" v-else>无</p>
            </div>
          </div>
        </a-card>
      </div>
      <div v-if="cuttentTab==2">
        <a-card title="维修信息" :bordered="false" style="margin-top:12px">
          <div class="item-wrap">
            <div style="width:100%">
              <p class="subtitle">故障类型</p>
              <p class="secondary-text">{{ repairDetailInfo.resultVo.faultCategory || '-' }}</p>
            </div>
          </div>
          <div class="item-wrap" style="margin-top:40px">
            <div style="width:100%">
              <p class="subtitle">故障原因</p>
              <p class="secondary-text">{{ repairDetailInfo.resultVo.faultReason || '-' }}</p>
            </div>
          </div>
          <div class="item-wrap">
            <div style="width:100%">
              <p class="subtitle">维修描述</p>
              <p class="secondary-text">{{ repairDetailInfo.resultVo.repairDescription || '-' }}</p>
            </div>
          </div>
          <div class="item-wrap">
            <div style="width:100%">
              <p class="subtitle">附件</p>
              <file-detail :ids="repairDetailInfo.resultVo.attachment" v-if="repairDetailInfo.resultVo.attachment"></file-detail>
              <p class="secondary-text" v-else>无</p>
            </div>
          </div>

        </a-card>
        <a-card title="其他" :bordered="false" style="margin-top:12px">
          <div class="item-wrap">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">维修开始时间</p>
                <p class="secondary-text">{{ repairDetailInfo.resultVo.repairStartTime || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">维修结束时间</p>
                <p class="secondary-text">{{ repairDetailInfo.resultVo.repairEndTime || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text"></p>
              </div>
            </div>
            <div class="wrapRight">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
              </div>
            </div>
          </div>
          <div class="item-wrap" style="margin-top:40px">
            <div class="detail-item">
              <p class="subtitle">维修人</p>
              <p class="secondary-text">{{ repairDetailInfo.resultVo.realname || '-' }}</p>
            </div>
          </div>
        </a-card>
      </div>
      <div v-if="cuttentTab==3">
        <a-card :bordered="false" style="margin-top:12px">
          <a-table size="middle" :scroll="{ x: 'calc(100vw - 304px)', y: 'calc(100vh - 420px)' }" :columns="pickingColumns"
            :dataSource="repairDetailInfo.recodeInfoVoList" :pagination="false" class="j-table-force-nowrap">
            <template slot="digestText" slot-scope="text,record">
              <div style="width: 100%;">
                <div class="digesttext" v-for="(item,index) in text" :key="index">{{ item }}</div>
              </div>
            </template>
          </a-table>
        </a-card>
      </div>
      <div style="margin-top: 12px" v-if="repairDetailInfo.flowInstId">
        <Examine  type="2" :id="repairDetailInfo.flowInstId" ref="examine" />
        <div style="height: 50px"></div>
      </div>
    </div>
  </jke-modal>
</template>
<script>
import moment from 'moment'
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import { numFormat } from '@/utils/util'
import { queryInfoById } from '@/api/productOrder'
import Examine from '@/components/examine'

import FlowStatus from '@/pubComponent/FlowStatus'
export default {
  data() {
    return {
      jkeForm: {
        title: '报修维修详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      numFormat,
      moment,
      parentId: '',
      cuttentTab: '1',
      tabList: [
        {
          title: '故障报修信息',
          key: '1',
        },
        {
          title: '维修结果信息',
          key: '2',
        },
        {
          title: '维修记录信息',
          key: '3',
        },
      ],
      repairDetailInfo: {},
      // 工艺路线配置列
      //领料记录
      pickingColumns: [
        {
          title: '时间',
          dataIndex: 'createTime',
          align: 'left',
          width: '15%',
          ellipsis: true,
        },
        {
          title: '操作类型',
          dataIndex: 'operationType',
          align: 'left',

          width: '10%',
          ellipsis: true,
        },
        {
          title: '操作人',
          dataIndex: 'createBy',
          align: 'left',
          width: '12%',
          ellipsis: true,
        },
        {
          title: '摘要',
          dataIndex: 'digestText',
          align: 'left',
          width: '63%',
          scopedSlots: { customRender: 'digestText' },
          ellipsis: true,
        },
      ],
      headerTitle: '',
    }
  },
  components: {
    crumbs,
    FileDetail,
    FlowStatus,
    Examine
  },
  methods: {
    returnColor(status) {
      let colorStr = ''
      switch (status) {
        case 'AGREE':
          colorStr = '#00b042'
          break
        case 'RUNNING':
          colorStr = '#1890ff'
          break
        case 'TERMINATED':
          colorStr = '#888888'
          break
        case 'REFUSE':
          colorStr = '#ff4d4f'
          break
      }
      return colorStr
    },
    setColor(stasusName) {
      let statusNum = null
      switch (stasusName) {
        case '未开始':
          statusNum = 4
          break
        case '进行中':
          statusNum = 2
          break
        case '已完成':
          statusNum = 3
          break
      }
      let cor = {
        1: '#FF943E',
        2: '#1890FF',
        3: '#00B042',
      }
      return cor[statusNum] || ''
    },
    /* 分割线 */
    checkStatus(value) {
      if (value == 0) {
        return '#DFDFDF'
      } else if (value >= 100) {
        return '#4bd863'
      } else {
        return '#1890ff'
      }
    },
    checkColor(value) {
      if (value == 0) {
        return '#DFDFDF'
      } else if (value >= 100) {
        return '#00B042'
      } else {
        return '#1890FF'
      }
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    initDetail(id) {
      this.cuttentTab = '1',
      this.jkeForm.visible = true
      this.parentId = id
      let obj = {
        id: this.parentId,
      }
      queryInfoById(obj).then((res) => {
        if (res.success) {
          if (res.result) {
            res.result.recodeInfoVoList.forEach(el=>{
              if(el.digestText){
                el.digestText = el.digestText.split('&')
              }else{
                el.digestText = []
              
              }

            })
            this.repairDetailInfo = res.result
            
          }
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  .wrapLeft {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .detail-item {
      flex: 1;
    }
  }
  .wrapRight {
    width: 116px;
    .detail-item {
      .subtitle {
        text-align: right;
      }
      .secondary-text {
        text-align: right;
      }
    }
  }
}
.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}

.uni-card {
  padding: 24px 40px;
  margin: -12px 0 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px 0 24px -40px;
}
.cards-box {
  // max-height: calc(100vh - 190px);
  overflow-y: scroll;
}
.tabBox {
  margin-top: 20px;
}
/deep/ .ant-tabs-bar {
  margin-bottom: 0;
}
div.explaneBox {
  .flex(flex-end, center);
  margin-bottom: 40px;
  div.one {
    .flex(center, center);

    div.color {
      width: 14px;
      height: 14px;
      background: #dfdfdf;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }

  div.two {
    .flex(center, center);
    margin-left: 40px;
    div.color {
      width: 14px;
      height: 14px;
      background: #1890ff;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }

  div.three {
    .flex(center, center);
    margin-left: 40px;
    div.color {
      width: 14px;
      height: 14px;
      background: #00b042;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }
}
div.progressBox {
  .flex(flex-start, center);
  flex-wrap: wrap;
  div.itemPro {
    .flex(flex-start, center);
    margin-bottom: 16px;
    &:nth-last-child(1) .itemRight {
      display: none;
    }
    div.itemLeft {
      div.leftTop {
        width: 180px;
        text-align: center;
        font-size: 16px;
        color: #444444;
        margin-bottom: 14px;
      }

      div.leftBot {
        width: 180px;
        height: 116px;
        background: rgba(244, 245, 246, 1);
        border-radius: 6px;
        .flex(space-between, center,column);
        box-sizing: border-box;
        padding: 13px 0;
        div.botOen {
          font-size: 14px;
          color: #888888;
        }

        div.botTwo {
          font-size: 14px;
          color: #888888;
        }

        div.botThree {
          font-size: 14px;
          color: #888888;
        }

        .havePadding {
          .flex(center, center);
          width: 134px;
          font-size: 12px;
          color: #888888;
        }
      }
    }

    div.itemRight {
      height: 2px;
      width: 64px;
      background: #f4f5f6;
      position: relative;
      top: 16px;
    }
  }
}
/deep/ .ant-progress-inner {
  background-color: #dfdfdf;
}
.title {
  span {
    font-size: 14px;
    color: #888888;
  }
}
.digesttext{
  white-space: pre-wrap;
  word-break:break-all;
  // line-height: 25px;
}
</style>
